import { Button, Form, Radio } from 'antd';

import InputNumberRange from './InputNumberRange';

export default function Search() {
  const onFinish = (values: any) => {
    console.log('Received values from form: ', values);
  };

  const checkPrice = (_: any, value: { min: number; max: number }) => {
    if (value.min >= 0 && value.max > value.min) {
      return Promise.resolve();
    }
    return Promise.reject(new Error('请选择正确的范围'));
  };

  const [form] = Form.useForm();
  return (
    <Form
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 18 }}
      layout="horizontal"
      name="customized_form_controls"
      form={form}
      onFinish={onFinish}
      initialValues={{
        // area: {
        //   key: 'all',
        //   label: '全部',
        // },
        area: 'all',
        gpu: 'PermissionType.MENU',
        price: {
          min: 80,
          max: 100,
        },
      }}
    >
      <Form.Item label="区域" name="area">
        <Radio.Group optionType="button" buttonStyle="solid">
          <Radio value="all">全部</Radio>
          <Radio value="PermissionType.MENU">华南1(广州)</Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item label="GPU" name="gpu">
        <Radio.Group optionType="button" buttonStyle="solid">
          <Radio value="PermissionType.CATALOGUE">全部</Radio>
          <Radio value="PermissionType.MENU">RTX4090</Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item
        name="memory"
        label="内存"
        rules={[{ validator: checkPrice }]}
        initialValue={{
          min: 0,
          max: 40,
        }}
      >
        <InputNumberRange
          placeholder={['Min', 'Max']}
          suffix="GB"
          style={{ width: 80, textAlign: 'center' }}
        />
      </Form.Item>
      <Form.Item
        name="disk"
        label="磁盘"
        rules={[{ validator: checkPrice }]}
        initialValue={{
          min: 10,
          max: 99,
        }}
      >
        <InputNumberRange
          placeholder={['Min', 'Max']}
          suffix="GB"
          style={{ width: 80, textAlign: 'center' }}
        />
      </Form.Item>
      <Form.Item
        name="prices"
        label="价格范围"
        rules={[{ validator: checkPrice }]}
        initialValue={{
          min: 80,
          max: 999,
        }}
      >
        <InputNumberRange
          placeholder={['Min', 'Max']}
          suffix="￥"
          style={{ width: 80, textAlign: 'center' }}
        />
      </Form.Item>
      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
}
